<!doctype html>
<html dir="$i18n{textdirection}" lang="$i18n{language}">
<head>
<meta charset="utf-8">
<title>$i18n{componentsTitle}</title>
<link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
<link rel="stylesheet" href="components.css">
<if expr="lacros or chromeos">
  <link rel="stylesheet" href="chrome://resources/css/os_header.css">
</if>

</head>
<body>
<div id="body-container" style="visibility:hidden">

  <if expr="lacros or chromeos">
    <div class="os-link-container-container" id="os-link-container">
      <div class="os-link-container">
        <span class="os-link-icon"></span>
        <span aria-hidden="true" id="os-link-desc">$i18n{os-components-text1}</span>
        <a href="#" id="os-link-href" aria-describedby="os-link-desc">
          $i18n{os-components-link}
        </a>
        <span aria-hidden="true">$i18n{os-components-text2}</span>
      </div>
    </div>
  </if>

  <div id="header"><h1>$i18n{componentsTitle}</h1></div>
  <div id="component-placeholder"></div>
  <div id="component-template" hidden>

    <div id="container">
    <div id="top">

      <div class="section-header">
        <span class="section-header-title">$i18n{componentsTitle}</span>
        <span class="section-header-title"
              jsdisplay="components.length > 0">(<span
              jscontent="components.length"></span>)</span>
      </div>

    </div>
    </div>

    <div class="content">
      <div class="component-name no-components"
           jsdisplay="components.length === 0">
        <div>$i18n{noComponents}</div>
      </div>

      <div jsdisplay="components.length > 0">
        <div class="component"
             jsselect="components">
          <div class='component-enabled'>
            <div class="component-text">
              <div>
                <span class="component-name" dir="ltr"
                    jscontent="name">
                </span>
                <span>
                  - <span>$i18n{componentVersion}</span>
                    <span dir="ltr" jscontent="version"
                        jsvalues=".id: 'version-' + id"></span>
                </span>
              </div>
            </div>
          </div>
          <div class="component-text">
            <span>$i18n{statusLabel}</span>
            -
            <span jscontent="status" jsvalues=".id: 'status-' + id">
            <span>
          </div>
          <div class="component-actions">
            <button class="button-check-update" guest-disabled
                jsvalues=".id:id">
              $i18n{checkUpdate}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="module" src="components.js"></script>
<script src="chrome://resources/js/jstemplate_compiled.js"></script>
</body>
</html>
